<template>
  <div>
    <el-form label-width="90px" size="mini">
      <el-collapse class="customer-collapse">
        <el-collapse-item title="文字">
          <el-form-item label="字体">
            <el-select v-model="attribute.textFamily">
              <el-option v-for="(item,index) in textFamilyList" :key="index+item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.textColor" show-alpha/>
          </el-form-item>
          <el-form-item label="加粗">
            <el-radio-group v-model="attribute.fontWeight">
              <el-radio-button label="lighter">更细</el-radio-button>
              <el-radio-button label="normal">正常</el-radio-button>
              <el-radio-button label="bold">加粗</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="倾斜">
            <el-radio-group v-model="attribute.fontStyle">
              <el-radio-button label="normal">正常</el-radio-button>
              <el-radio-button label="italic">斜体</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <div class="group">
            <div class="group-label">文字</div>
            <div class="group-content">
              <el-form-item label="文字大小" >
                <el-input-number v-model="attribute.textSize" style="width: 100%"/>
              </el-form-item>
              <el-form-item label="行高">
                <el-input-number v-model="attribute.textLineHeight" style="width: 100%"/>
              </el-form-item>
              <el-form-item label="字体间距">
                <el-input-number :min="0" v-model="attribute.letterSpacing" style="width: 100%"/>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="对齐方式">
            <el-radio-group v-model="attribute.textAlign">
              <el-radio-button label="left">左</el-radio-button>
              <el-radio-button label="center">中</el-radio-button>
              <el-radio-button label="right">右</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="下划线">
            <el-select v-model="attribute.textDecoration">
              <el-option v-for="(item,index) in textDecorationList" :key="index+item.label" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">
              点击跳转
              <el-tooltip effect="light" content="跳转外链请写全路径如：https://www.baidu.com，大屏间跳转请写view?id=大屏ID，如：view?id=6580439c70e1d2c2ff2b98" placement="bottom-end">
                <i class="el-icon-warning" />
              </el-tooltip>
            </span>
            <el-input type="textarea" :rows="3" v-model="attribute.url"></el-input>
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item title="修饰">
          <el-form-item label="滚动">
            <el-switch v-model="attribute.isMarquee" />
          </el-form-item>
          <div class="group">
            <div class="group-content">
              <el-form-item label="时间" v-show="attribute.isMarquee">
                <el-input-number :min="0" v-model="attribute.duration" style="width: 100%"/>
              </el-form-item>
              <el-form-item label="间隔" v-show="attribute.isMarquee">
                <el-input-number :min="0" v-model="attribute.waitTime" style="width: 100%"/>
              </el-form-item>
            </div>
          </div>
            <el-form-item label="背景色">
              <el-color-picker v-model="attribute.bgColor" show-alpha/>
            </el-form-item>

            <el-form-item label="阴影">
              <el-switch v-model="attribute.isShadow" />
            </el-form-item>
            <div class="group">
              <div class="group-content">
                <el-form-item label="x" v-show="attribute.isShadow">
                  <el-input-number  v-model="attribute.shadowOffsetX" style="width: 100%"/>
                </el-form-item>
                <el-form-item label="y" v-show="attribute.isShadow">
                  <el-input-number  v-model="attribute.shadowOffsetY" style="width: 100%"/>
                </el-form-item>
                <el-form-item label="模糊" v-show="attribute.isShadow">
                  <el-input-number v-model="attribute.shadowBlur" style="width: 100%"/>
                </el-form-item>
                <el-form-item label="颜色" v-show="attribute.isShadow">
                  <el-color-picker v-model="attribute.shadowColor" show-alpha/>
                </el-form-item>
              </div>
            </div>

            <el-form-item label="渐变文字">
              <el-switch v-model="attribute.isGradual" />
            </el-form-item>
            <div class="group">
              <div class="group-content">
                <el-form-item label="颜色" v-show="attribute.isGradual">
                  <tm-color-range  v-model="attribute.gradualColor" />
                </el-form-item>
              </div>
            </div>

        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import tmColorRange from '@/package/components/tm-color-range'
import {textFamilyList} from "@/package/tools/common";

export default {
  name: "cpt-text-option",
  components: {tmColorRange},
  props: {
    attribute: Object
  },
  data() {
    return {
      textFamilyList: textFamilyList,
      textDecorationList: [
          {label:'无',value:'none'},
          {label:'下划线',value:'underline'},
          {label:'上划线',value:'overline'},
          {label:'穿过文字',value:'line-through'},
          {label:'闪烁(存在兼容问题)',value:'blink'}
      ]
    }
  }
}
</script>

<style scoped>

</style>
